import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import $ from "jquery"
import "./index.css"
import Jour from "./Jour.js"
class Index extends Component{
	constructor(props){
		super(props)
		this.state={
			"username":"",
			"avatar":"",
			"sign":"",
			"jour":[]
		}
	}

	//得到后台过来的用户的说说
	componentWillMount(){
		let This=this
		//得到username和avatar和说说内容
		$.post("/otheruser",function(data){
				if(data==="-1"){
					return ;
				}
				else{
					console.log(data)
					This.setState(data)
					return ;
				}
		})
	}
	
	
	componentDidMount(){
		//这是主页和发说说按钮动画的移入移除
		$(".href-btn").find("div").hover(function(){
			$(this).addClass("rubberBand")
		},function(){
			$(this).removeClass("rubberBand")
		})
	}

	render(){
		return (
			<div className="container-fluid container-full-screen">
				<div className="fixedbg"></div>
				<div className="href-btn">
					<div onClick={(e)=>window.location="/"} style={{cursor:"pointer"}} className="animated">
						HOME
					</div>
				</div>
				<div 
					className="content"
				>
					<div className="row">
						<div className="content-left col-lg-4 col-lg-push-1 col-md-4 col-md-push-1 col-sm-4 col-xs-4">
							<img className="img-thumbnail img-responsive" src={"/img/"+this.state.avatar} alt="大头像"/>
							<div className="content-left-username content-left-relief" >{this.state.username}</div>
							<div className="content-left-relief content-left-sign">{this.state.sign}</div>
						</div>
						<div style={{display:this.state.jour?"":"none"}} className="content-left-jour content-left col-lg-5 col-lg-push-6 col-md-5 col-md-push-6 col-sm-8 col-sm-push-4 col-xs-8 col-xs-push-4">
							{this.state.jour.map((val,index)=>{
								if(!val.jourUserName) return ;
								return <Jour jour={val} key={index}/>
							})} 
						</div>
					</div>
				</div>
			</div>
		)
			
	}
}
ReactDOM.render(<Index />, document.getElementById('index'));

//还原区
// src={"/img/"+this.state.avatar}   小头像和大头像



